﻿<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>首页</title>
        <link rel="stylesheet" href="css/index1.css">
        <link rel="stylesheet" href="icon/iconfont.css">
        <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">
    </head>
    <body>
        <header>
            <div class="logo-box">
                <div class="logo">
                    <h1>C<b>a</b>lm</h1>
                    <span>Free Creative Simple Portfolio</span>
                </div>
                <nav>
                    <ul>
                        <li class="nav-active">HOME</li>
                        <li>ABOUT</li>
                        <li>PORTFOLIO</li>
                        <li>SUPPORT</li>
                        <li>CONTACT</li>
                    </ul>
                </nav>
            </div>
            <div class="title-box">
                <div class="box-left">
                    <h3>Welcome Ladies & Gents to Calm Website.</h3>
                    <span>A theme more stylish than any other on ThemeForest.</span>
                </div>
                <div class="box-right">
                    <h3>FIND US ONLINE</h3>
                    <ul class="contact">
                        <li class="qq">
                            <a href="">
                                <i class="iconfont icon-qq"></i>
                            </a>
                        </li>
                        <li class="wechat">
                            <a href="">
                                <i class="iconfont icon-wechat"></i>
                            </a>
                        </li>
                        <li class="weibo">
                            <a href="">
                                <i class="iconfont icon-weibo"></i>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </header>
        <div class="content">
            <div class="img-box">
                <div class="text-list">
                    <ul>
                        <li><a>All</a></li>
                        <li><a>Design</a></li>
                        <li><a>Branding</a></li>
                        <li><a>Graphic</a></li>
                        <li><a>Animation</a></li>
                        <li><a>Illustration</a></li>
                        <li><a>Photography</a></li>
                    </ul>
                </div>
                <div class="img-list">
                    <ul>
                        <li>
                            <a href="">
                                <img src="images/1.jpg" alt="1" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/2.jpg" alt="2" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/3.jpg" alt="3" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/4.jpg" alt="4" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/5.jpg" alt="5" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/6.jpg" alt="6" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/7.jpg" alt="7" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/8.jpg" alt="8" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/9.jpg" alt="9" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/10.jpg" alt="10" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/11.jpg" alt="11" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                        <li>
                            <a href="">
                                <img src="images/12.jpg" alt="12" />
                                <span class="text-one">Working in Shop</span>
                                <br>
                                <span class="text-two">Branding / Design </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="news">
            <div class="new-box">
                <div class="new-list">
                    <h3>About us</h3>
                    <div class="new-text">
                        <p>Duis id eros ac eros cursus gravida a non magna.
                        Sed vitae nisl diam, non sollicitudin mi. In dui arcu,
                        rhoncus ac consequat eget, cursus sit amet risus.</p>

                        <p>Address: Street 9890, New Something 1234,Country</p>
                        <p>Telephone: 1234 5678</p>
                        <p>Fax: 9876 5432</p>
                    </div>
                    <ul class="contact">
                        <li class="qq">
                            <a href="">
                                <i class="iconfont icon-qq"></i>
                            </a>
                        </li>
                        <li class="wechat">
                            <a href="">
                                <i class="iconfont icon-wechat"></i>
                            </a>
                        </li>
                        <li class="weibo">
                            <a href="">
                                <i class="iconfont icon-weibo"></i>
                            </a>
                        </li>
                    </ul>
                </div>
                <div class="new-list">
                    <h3>Latest Posts</h3>
                    <div class="new-posts">
                        <ul>
                            <li>
                                <div>Curabitur pharetra, ante!</div>
                                <span>25 April 2013</span>
                            </li>
                            <li>
                                <div>Gentle Marimba by Alastair Cameron</div>
                                <span>25 April 2013</span>
                            </li>
                            <li>
                                <div>Curabitur pharetra, ante!</div>
                                <span>25 April 2013</span>
                            </li>
                            <li>
                                <div>Gentle Marimba by Alastair Cameron</div>
                                <span>25 April 2013</span>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="new-list">
                    <h3>LATEST COMMENTS</h3>
                    <ul class="new-lat">
                        <li><span>Dann Petty on Curabitur pharetra, ante lobortis dictum.</span></li>
                        <li><span>Kevin Kalde on Aliquam vulputate, pede vel vehicula accumsan, mi neque rutrum erat, eu congue orci lorem eget lorem. </span></li>
                        <li><span>Sean McCabe on Class aptent taciti sociosquad litora torquent per </span></li>
                    </ul>
                </div>
                <div class="new-list">
                    <h3>FLICKR PHOTOSTREAM</h3>
                    <div class="new-img">
                        <ul>
                            <li><img src="images/1.jpg" alt="images/1.jpg"></li>
                            <li><img src="images/2.jpg" alt="images/2.jpg"></li>
                            <li><img src="images/3.jpg" alt="images/3.jpg"></li>
                            <li><img src="images/4.jpg" alt="images/4.jpg"></li>
                            <li><img src="images/5.jpg" alt="images/5.jpg"></li>
                            <li><img src="images/6.jpg" alt="images/6.jpg"></li>
                            <li><img src="images/7.jpg" alt="images/7.jpg"></li>
                            <li><img src="images/8.jpg" alt="images/8.jpg"></li>
                            <li><img src="images/9.jpg" alt="images/9.jpg"></li>
                            <li><img src="images/10.jpg" alt="images/10.jpg"></li>
                            <li><img src="images/11.jpg" alt="images/11.jpg"></li>
                            <li><img src="images/12.jpg"></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>

        <footer>
            <div class="copyright">
                <div class="box">
                    Copyright 2013 Calm. All Rights Reserved.
                </div>
                <div class="box">
                    <ul>
                        <li><span>Home</span></li>
                        <li><span>About</span></li>
                        <li><span>Portfolio</span></li>
                        <li><span>Blog</span></li>
                        <li><span>Features</span></li>
                        <li><span>Contact</span></li>
                    </ul>
                </div>
            </div>

        </footer>
    </body>
</html>